<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>H+ 后台主题UI框架 - 基本表单</title>
		<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="../../css/plugins/iCheck/custom.css" rel="stylesheet">
		<link href="../../css/animate.css" rel="stylesheet">
		<link href="../../css/style.css?v=4.1.0" rel="stylesheet">

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		


	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>修改登陆密码</h5>
					</div>
					<div class="ibox-content">
						<div class="form-horizontal m-t" id="commentForm">
							<div class="form-group">
								<label class="col-sm-3 control-label">当前密码:</label>
								<div class="col-sm-8">
									<input v-model="pass" placeholder="6-16位任意字符" id="pass" maxlength="16" type="password" class="form-control" required="" aria-required="true">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">新密码:</label>
								<div class="col-sm-8">
									<input v-model="newpass" placeholder="6-16位任意字符" id="newpass" maxlength="16" type="password" class="form-control" name="email" required="" aria-required="true">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">重复新密码:</label>
								<div class="col-sm-8">
									<input v-model="newpas2" placeholder="6-16位任意字符" id="newpas2" maxlength="16" type="password" class="form-control" name="url">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-3">
									<button @click="dochange" type="button" class="btn btn-w-m btn-primary">{{btn}}</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
			</div>
			
		</div>

		<script src="../../js/jquery.min.js?v=2.1.4"></script>
		<script src="../../js/bootstrap.min.js?v=3.3.6"></script>
		<script src="../../js/content.js?v=1.0.0"></script>
		<script src="../../js/plugins/iCheck/icheck.min.js"></script>
		<script src="../../js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
			var vm = new Vue({
				el:".row",
				data:{
					pass:'',
					newpass:'',
					newpas2:'',
					btn:'提交'
				},
				methods:{
					dochange(){
						if(this.btn=='提交'){
							if(this.pass.length<6){
								layer.tips('当前密码格式错误', '#pass', {tips: [1, '#f0ad4e'],time: 3000});
							}else if(this.newpass.length<6){
								layer.tips('新密码格式错误', '#newpass', {tips: [1, '#f0ad4e'],time: 3000});
							}else if(this.newpass!=this.newpas2){
								layer.tips('两次输入的密码不一致', '#newpas2', {tips: [1, '#f0ad4e'],time: 3000});
							}else if(this.newpass == this.pass ){
								layer.tips('请输入新密码', '#newpass', {tips: [1, '#f0ad4e'],time: 3000});
							}else{
								this.btn="提交中...";
								this.$http.post('../../change.do',{
									'pass':this.pass,
									'newpass':this.newpass,
									'newpas2':this.newpas2
								}).then(function(res) {
									if(res.data.code=="1"){	//发短信成功
										this.btn="修改密码成功";
										layer.alert("修改密码成功！请重新登陆账号",{icon:1},function(){ window.parent.frames.location.href="../../html/login.html" });
									}else{
										this.btn="提交";
										layer.alert(res.data.message,{icon:0});
									}
								}, function() {
									this.btn="提交";
									layer.alert('服务器链接失败！请检查您的网络设置',{icon:2});
								});	
								
								
							}
						}
					}
				}
			})
		</script>
	</body>

</html>